<template>
  <light-dialog
    class="light-dialog"
    :title="data.aisShipName || '无名'"
    v-dialogDrag
    :visible.sync="dialogVisible"
    :width="430"
    :modal="false"
    :modal-append-to-body="false"
    :append-to-body="false"
    :close-on-click-modal="false"
    @close="close"
    hiddenButton
    isClose
    top="150px"
    right="20px"
  >
    <div class="right" slot="right">
      <i class="el-icon-close" @click="close"></i>
    </div>
    <div class="detail-content">
      <form-detail
        class="form-detail"
        :data="data"
        :option="option"
        labelWidth="75"
      ></form-detail>
    </div>
    <!-- 按钮列表 -->
    <div class="bottom-content" v-if="data.arpaType !== '1'">
      <div class="button-list">
        <!-- <el-button class="ele-button" size="mini" @click="handleLocation(data)"
          >定位</el-button
        > -->
        <el-button
          class="ele-button"
          size="small"
          type="primary"
          @click="handleLineSelect()"
          >轨迹查询</el-button
        >
        <el-button
          class="ele-button"
          size="small"
          type="primary"
          @click="handleVideo()"
          >{{ isTracking ? "取消追踪" : "视频跟踪" }}</el-button
        >
      </div>
    </div>
    <!-- 轨迹查询 -->
    <div class="time-select" v-if="lineShow">
      <div class="block">
        <el-date-picker
          size="small"
          v-model="trajectoryTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </div>
      <div class="time-select-button-list">
        <el-button
          class="first"
          size="small"
          @click="timeSelectSubmit()"
          v-loading="trajectoryLoading"
          :disabled="trajectoryLoading"
          element-loading-spinner="el-icon-loading"
          >查 询</el-button
        >
        <el-button class="second" size="small" @click="timeSelectCancel()"
          >取 消</el-button
        >
      </div>
    </div>
  </light-dialog>
</template>

<script>
import { option } from "./options";
import { getApraListById } from "@/api/apra";
import { moveToCenterByLonAndLat } from "@/page/chart/js/util";
export default {
  props: {
    info: {
      default: () => {},
    },
    map: {
      default: () => {},
    },
  },
  data() {
    return {
      dialogVisible: false,
      option,
      trajectoryTime: [],
      trajectoryLoading: false,
      lineShow: false,
      isTracking: false,
    };
  },
  computed: {
    data: {
      get() {
        return this.info.data || {};
      },
      set() {},
    },
  },
  methods: {
    open() {
      this.dialogVisible = true;
      this.isTracking = false;
    },
    close() {
      this.dialogVisible = false;
      this.trajectoryTime = [];
      this.trajectoryLoading = false;
      this.isTracking = false;
    },
    handleVideo() {
      if (this.data.arpaType !== "1") {
        this.isTracking = !this.isTracking;
        this.$emit("handleVideo", {
          targetNum: this.data.targetNum,
          isTracking: this.isTracking,
          info: this.data,
        });
      }
    },
    handleLineSelect() {
      this.lineShow = !this.lineShow;
    },
    timeSelectSubmit() {
      if (this.trajectoryTime.length > 0) {
        const data = {
          startTime: parseInt(+new Date(this.trajectoryTime[0]) / 1000),
          endTime: parseInt(+new Date(this.trajectoryTime[1]) / 1000),
          targetNum: this.data.targetNum,
        };
        this.trajectoryLoading = true;
        getApraListById(data).then(({ data }) => {
          this.trajectoryLoading = false;
          if (!data) {
            return;
          }
          let lineData = {};
          lineData[this.data.targetNum] = data;
          this.$emit("selectLine", lineData);
        });
      }
    },
    timeSelectCancel() {
      let layerTmp = this.map
        .getLayers()
        .getArray()
        .find((m) => m.get("name") === "TRAJECTORY");
      if (layerTmp) {
        this.map.removeLayer(layerTmp);
      }
      this.lineShow = !this.lineShow;
    },
    // 定位
    handleLocation(row) {
      moveToCenterByLonAndLat([row.targetLon, row.targetLat], this.map);
    },
  },
};
</script>

<style lang="scss" scoped>
.light-dialog {
  &::v-deep .head {
    margin: -1px;
    background-color: $base-theme-sub-color;
    .title {
      color: #fff !important;
    }
    i {
      color: #fff;
    }
  }
  .right {
    i {
      color: #fff;
      cursor: pointer;
      line-height: 23px;
    }
  }
  .bottom-content {
    .button-list {
      display: flex;
      justify-content: space-between;
      .ele-button {
        flex: 1;
      }
    }
  }
  .time-select {
    margin-top: 20px;
    &::v-deep .el-date-editor {
      width: 100%;
    }
    .time-select-button-list {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      .first {
        color: #fff;
        width: 48%;
        background-color: $base-theme-sub-color;
      }
      .second {
        width: 48%;
        color: $base-theme-sub-color;
        border-color: $base-theme-sub-color;
      }
    }
  }
}
</style>
